<template>
  <div>
    <div>
      <b-sidebar
        visible
        width="200px"
        title="Haier-Admin"
        no-close-on-route-change
        no-header-close
        sidebar-class="bg-dark"
        header-class="text-center font-weight-bold text-white shadow-sm"
      >
        <b-nav vertical pills>
          <b-nav-item v-for="(item, index) in navs" :key="index" :to="item.route">
            <b-nav-text class="text-white">{{ item.label }}</b-nav-text>
          </b-nav-item>
        </b-nav>
      </b-sidebar>
    </div>
    <div class="main bg-light">
      <div class="nav-header">
        <b-navbar type="light" variant="light" class="bg-transparent border-bottom">
          <div>
            <b-navbar-nav>
              <b-nav-item @click="logout()">退出登陆</b-nav-item>
            </b-navbar-nav>
          </div>
        </b-navbar>
      </div>
      <b-breadcrumb class="bg-transparent shadow-sm" :items="items"></b-breadcrumb>
      <div class="position-relative m-2">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags:[{label: 'aaa'}, {label: 'aaa'}],
      items:[
        {text: '主页', to: '/home'},
      ],
      navs: [],
    }
  },
  
  methods: {
    updateRoutes(to){
      this.items = to.matched.filter(({meta})=>{
        return meta && meta.name && meta.name !== ""
      }).map(item=>{
          return {
            text: item.meta.name,
            to: item.path === "" ? "/home" : item.path
          }
      })
    },
    installNav(items, dep=false){
      items.forEach(item => {
        if(item.path == '/' && !dep){
            this.installNav(item.children, !dep)
        }else{
            let {meta} = item
            if(!meta || !meta.name) return
            this.navs.push({
              label: meta.name,
              route: Object.assign({
                path: dep ? `/${item.path}` : item.path
              }, meta.params)
            })
        }
      });
    },
    logout(){
      this.$router.push('/login')
      console.log(this.$router)
    }
  },
  mounted(){
    this.$router.afterEach((to)=>{
      this.updateRoutes(to)
    })
  },
  beforeCreate(){
    var {status} =  localStorage;
    if(!status){
      this.$router.replace("/login")
    }
  },
  created(){
    let {routes} = this.$router.options
    this.installNav(routes)
    if(this.$route.path === "/"){
      this.$router.push({path: '/home'})
    }
    this.updateRoutes(this.$route)
  }
};
</script>

<style>
.nav-bd {
  background-color: red;
}

.main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
}
.nav-header{
  width: 100%;
}

.nav-header > :first-child{
  position: absolute;
  right: 0;
}

</style>
